<template>
  <div class="platformdata-box">
    <div class="platformdata-task" >
      <div class="task-biaoti" >
        <div class="task-label">
          <span class="task-count" :style="{'color': '#00DD9C'}"> {{ companyTotal }}</span>
        </div>
        <div class="task-label">公司数量</div>
      </div>
    </div>
    <div class="platformdata-task" >
      <div class="task-biaoti" >
        <div class="task-label">
          <span class="task-count" :style="{'color': '#36B2FF'}"> {{ projectTotal }}</span>
        </div>
        <div class="task-label"> 项目数量</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:'PlatformData',
  props: {
    chinaMapIn: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapDetail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    titleName:{
      type:String,
      default: () => {
        return '化粪池液位监测平台'
      }
    },
    companyTotal:{
      type:[String,Number],
      default: () => {
        return '0'
      }
    },
    projectTotal:{
      type:[String,Number],
      default: () => {
        return '0'
      }
    }
  },
  watch: {
    chinaMapIn: {
      handler() {
      },
      immediate: true,
      deep: true
    },
    mapDetail: {
      handler() {
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      chart: null,
      detail: '',
      formData:[
        {
          src: require("@/assets/screen/yonghugongji.jpg"),
          label:'公司数量',
          count:5,
          color: '#00DD9C'
        },
        {
          src: require("@/assets/screen/huoyueyonghu.jpg"),
          label:'项目数量',
          count:6314,
          color: '#36B2FF'
        }
      ],
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.platformdata-box {
  position: relative;
  width: 140px;
  color: #CCDCFF;
  
  
  
  .platformdata-task{
    margin-top: 5px;
    width: 100%;
    height: 78px;
    background-image: url("../../../../assets/screen/pdialng.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .task-biaoti{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-size: 100% 100%;
      border-radius: 2px;
    }
    .task-label{
      width: 100%;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .task-count{
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
    }
  }
}
</style>
